<!-- 员工列表选择组件 -->
<template>
    <div>
        <el-select 
            v-model="selectedValue" 
            filterable 
            clearable 
            placeholder="选择员工" 
            :filter-method="searchKey"
            @change="change" 
            @clear="clear">
            <el-option
                v-for="item in optionList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
            </el-option>
        </el-select>
        <!-- <el-select
            v-model="form.userId"
            placeholder="请输入手机号、名字搜索"
            filterable
            remote
            clearable
            :remote-method="searchKey"
            @change="selectUser"
            :loading="loading">
            <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
            </el-option>

            <div slot="empty">
                <el-result icon="warning" title="未找到客户数据" subTitle="是否立刻创建？">
                    <template slot="extra">
                        <el-button type="primary" size="medium" @click="createDialogVisible = true">立即创建</el-button>
                    </template>
                </el-result>
            </div>
        </el-select> -->
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: [Number, String, Array],
                default: null
            },
            //获取员工类型\n\n空.不限\n1.运营商管理员\n2.加盟商管理员\n3.站点管理员\n4.站点普通员工\n5.打包站站长\n6.打包站普通员工\n7.小哥
            selectType:{
                type: [Number, String],
                default: 0
            },
            franchiseId:{
                type: [Number, String],
                default: null
            },
            storeId:{
                type: [Number, String],
                default: null
            }
        },
        data() {
            return {
                userList: [],
                optionList: [],
                selectedValue: this.value // 使用本地 data 属性来保存选中的值
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(newVal) {
                    this.selectedValue = newVal; // 监听外部变化以保持同步
                }
            }
        },
        mounted() {
            this.getUserList()
        },
        methods: {
            getUserList(){
                this.$axios.post('/Select/Staff',{
                    type: this.selectType,
                    franchiseId: this.franchiseId || 0,
                    storeId: this.storeId || 0,
                    key: ''
                }).then((res) => {
                    this.userList = res;
                    this.optionList = res
                }).catch((err) => {
                    
                })
            },
            // 关键词搜索
			searchKey(queryString){
                console.log(queryString)
                // 假设这是你的原始数据
                const data = this.userList;

                const results = queryString
                    ? data.filter(item => {
                        const nameMatch = item.name.toLowerCase().includes(queryString.toLowerCase());
                        const mobileMatch = item.mobile.includes(queryString);
                        return nameMatch || mobileMatch;
                    })
                    : data;
                console.log("results:",results)
                this.optionList = results
			},
            clear(){
                this.optionList = this.userList
                // this.change()
            },
            change(){
                this.$emit('change', this.selectedValue); // 触发 change 事件传递新值
                this.$emit('input', this.selectedValue); // 如果支持 v-model，则也触发 input 事件
                // this.$emit('getDetails', this.userList.find((item)=>item.id == this.selectedValue));
            }
        }
    }
</script>